<md-dialog flex="60" ng-cloak>
    <form>
        <md-toolbar>
            <div class="md-toolbar-tools">
                <h2>Waiting Confirm Page</h2>
                <span flex></span>
                <md-button class="md-icon-button" ng-click="cancel()">
                    <i class="material-icons">close</i>
                </md-button>
            </div>
        </md-toolbar>
        <md-dialog-content>
            <div class="md-dialog-content">

                <div class="tab-content" style="padding:0px 15px; min-height: 300px;">
                    <div class="alert alert-danger display-hide" ng-show="isHasErrorMessage" style="display: block;">
                        <button class="close"  ng-click="closeAlart()"  data-close="alert"></button> {{errorMsg}}
                    </div>
                    <div style="padding-bottom:120px">
                        <div class="portlet-title" style=" border-bottom: 1px solid #cfc7c7; margin-bottom: 10px;">
                            <div class="caption">
                                <span class="caption-subject bold"> Waiting Info</span>
                            </div>
                        </div>

                        <div class="row form-group">
                            <div class="col-md-6">
                                <label>Contact Type</label>
                                <ui-select ng-model="waiting.contactType" style="border-radius: 4px;">
                                    <ui-select-match>{{$select.selected}}</ui-select-match>
                                    <ui-select-choices repeat="contactType in contactTypes">
                                        {{contactType}}
                                    </ui-select-choices>
                                </ui-select>
                            </div>
                            <div class="col-md-6">
                                <label>Contact Info<label class="bold font-red"> * </label></label>
                                <input type="text" ng-model="waiting.contactInfo" class="form-control"></input>
                            </div>


                        </div>
                        <div class="row form-group">
                            <div class="col-md-6">
                                <label>Reasons<label class="bold font-red"> * </label></label>
                                <ui-select multiple ng-model="waiting.reasons" style="border-radius: 4px;" required>
                                    <ui-select-match>{{$item}}</ui-select-match>
                                    <ui-select-choices repeat="reason in availableReasons">
                                        {{reason}}
                                    </ui-select-choices>
                                </ui-select>
                            </div>
                            <div class="col-md-6">
                                <label>Priority</label>
                                <ui-select ng-model="waiting.priority" style="border-radius: 4px;">
                                    <ui-select-match>{{$select.selected}}</ui-select-match>
                                    <ui-select-choices repeat="priority in taskPrioritys">
                                        {{priority}}
                                    </ui-select-choices>
                                </ui-select>
                            </div>

                        </div>

                        <div class="row form-group">
                            <div class="col-md-4">
                                <div class="row">
                                    <div class="col-md-5" style="text-align: right;">Appointment Time:</div>
                                    <div class="col-md-7">
                                        <span ng-show="appointmentTime">
                                            {{appointmentTime | amDateFormat:'YYYY-MM-DD HH:mm:ss'}}
                                        </span>
                                        <span ng-show="!appointmentTime" class="font-red">No Appointment</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="row">
                                    <div class="col-md-5" style="text-align: right;">Current Time:</div>
                                    <div class="col-md-7">
                                        {{timeNow | amDateFormat:'YYYY-MM-DD HH:mm:ss'}}
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="row">
                                    <div class="col-md-5" style="text-align: right;">Is OnTime</div>
                                    <div class="col-md-2">
                                        <md-switch class="md-primary" aria-label="Default" ng-model="waiting.isOnTime" style="margin-top: 0;margin-bottom: 0;"></md-switch>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="portlet-title" style=" border-bottom: 1px solid #cfc7c7; margin-bottom: 10px;">
                            <div class="caption">
                                <span class="caption-subject bold">  Task Info</span>
                            </div>
                        </div>
                        <div class="row form-group">
                            <div>
                                <table class="table table-striped table-bordered table-hover table-checkable order-column dataTable no-footer" role="grid">
                                    <thead>
                                        <tr role="row">
                                            <th>Company</th>
                                            <th>Task Name</th>
                                            <th>Subscribed Docks</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr ng-repeat="task in tasks track by $index">
                                            <td>{{task.companyName}}</td>
                                            <td> <span class="font-blue"> {{task.taskName}}</span></td>
                                            <td>
                                                <div>
                                                    <multiple-dock-auto-complete required="true" ng-model="task.subscribedDockIds"></multiple-dock-auto-complete>
                                                </div>
                                            </td>

                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <div class="row form-actions" style="text-align: right; padding-right: 20px;">
                       
                        <button type="button" ng-click="confirm()" class="btn blue" style="margin-right: 10px;">Confirm</button>
                        <button type="button" ng-click="cancel()" class="btn default">Cancel</button>
                    </div>
                </div>
        </md-dialog-content>
    </form>
</md-dialog>